<template>
  <!-- 新版季度总结 -->
  <div class="page_padding">
    <MyNavBar @goback="goback" :title="pageData.recordName" />
    <div class="tabs_box" v-if="showTabs">
      <van-tabs
        color="#d80a06"
        line-width="15"
        line-height="2"
        border
        swipeable
        title-active-color="#d80a06"
        title-inactive-color="#333333"
        v-model="activeName">
        <van-tab title="季度总结" title-class="my_tab"></van-tab>
        <van-tab title="考核登记表" title-class="my_tab"></van-tab>
      </van-tabs>
    </div>
    <!-- 页面内容 -->
    <div
      class="content"
      v-if="activeName == '0'"
      id="content"
      :class="{ fitBack: pageData.isSuggest === '1' || routerQuery.from === 'view' }">
      <!-- 输入模块 -->
      <div class="entry">
        <div class="work_box" v-if="recordType == '01-01' || recordType == '01-02'">
          <div class="work_box_title">
            <span class="title-text">{{ recordType == '01-01' ? '本周工作纪实' : '本月工作小结' }}</span>
          </div>
          <div class="work_box_text">
            <template v-if="pageData.workConList">
              <div class="one_week" v-for="(oneweek, index) in pageData.workConList" :key="index">
                <div class="one_week_top">
                  <div class="top_voice" v-if="oneweek.audioList && oneweek.audioList.length > 0">
                    <div class="top_label">
                      <span class="m-r-10">{{ index + 1 }}.</span>
                      <MyVoice
                        v-for="item in oneweek.audioList.slice(0, 1)"
                        :audioId="item.id"
                        :key="item.id"
                        :audioData="item"
                        :isDelete="false"></MyVoice>
                    </div>
                    <template>
                      <MyVoice
                        v-for="item in oneweek.audioList.slice(1)"
                        :audioId="item.id"
                        :key="item.id"
                        :audioData="item"
                        :isDelete="false"></MyVoice>
                    </template>
                  </div>
                  <div class="top_word">
                    <span class="m-r-10" v-if="!oneweek.audioList || oneweek.audioList.length == 0">
                      {{ index + 1 }}.
                    </span>
                    {{ oneweek.workContent }}
                  </div>
                </div>
                <div class="one_week_bottom">
                  <span v-if="oneweek.workTag">{{ oneweek.workTag }}</span>
                  <span v-if="oneweek.finishStatus">{{ oneweek.finishStatus == '1' ? '已完成' : '进行中' }}</span>
                  <span v-if="oneweek.finishPercent">完成量：{{ oneweek.finishPercent }}</span>
                  <span class="one_week_content4" v-if="oneweek.workClassifyName">{{ oneweek.workClassifyName }}</span>
                </div>
              </div>
            </template>
            <div class="simple-box">
              <div class="simple_voice">
                <MyVoice
                  v-for="(item, index) in pageData.workContentList"
                  :audioId="item.id"
                  :key="index"
                  :audioData="item"
                  :isDelete="false"></MyVoice>
              </div>
              <div class="simple_word pre_line" v-html="removeHtmlStyle(pageData.workCon)"></div>
            </div>
          </div>
        </div>
        <div class="work_box" v-if="recordType == '01-01' || recordType == '01-02'">
          <div class="work_box_title">
            <span class="title-text">{{ recordType == '01-01' ? '下周工作计划' : '下月工作计划' }}</span>
          </div>
          <div class="work_box_text">
            <div v-if="pageData.planConList">
              <div class="one_week" v-for="(oneweek, index) in pageData.planConList" :key="index">
                <div class="one_week_top">
                  <div class="top_voice" v-if="oneweek.audioList && oneweek.audioList.length > 0">
                    <div class="top_label">
                      <span class="m-r-10">{{ index + 1 }}.</span>
                      <MyVoice
                        v-for="item in oneweek.audioList.slice(0, 1)"
                        :audioId="item.id"
                        :key="item.id"
                        :audioData="item"
                        :isDelete="false"></MyVoice>
                    </div>
                    <template>
                      <MyVoice
                        v-for="item in oneweek.audioList.slice(1)"
                        :audioId="item.id"
                        :key="item.id"
                        :audioData="item"
                        :isDelete="false"></MyVoice>
                    </template>
                  </div>
                  <div class="top_word">
                    <span class="m-r-10" v-if="!oneweek.audioList || oneweek.audioList.length == 0">
                      {{ index + 1 }}.
                    </span>
                    {{ oneweek.workContent }}
                  </div>
                </div>
                <div class="one_week_bottom">
                  <span v-if="oneweek.workTag">{{ oneweek.workTag }}</span>
                  <span class="one_week_content4" v-if="oneweek.workClassifyName">{{ oneweek.workClassifyName }}</span>
                </div>
              </div>
            </div>
            <div class="simple-box">
              <div class="simple_voice">
                <MyVoice
                  v-for="(item, index) in pageData.planList"
                  :audioId="item.id"
                  :key="index"
                  :audioData="item"
                  :isDelete="false"></MyVoice>
              </div>
              <div class="simple_word pre_line" v-html="removeHtmlStyle(pageData.planCon)"></div>
            </div>
          </div>
        </div>
        <div class="work_category" v-for="(item, index) in watchData" :key="index">
          <BoardSound :listData="item" :entry="false"></BoardSound>
        </div>

        <!-- 问题建议 -->
        <div class="suggestion_box">
          <div class="suggestion" v-for="(item, i) in suggestionList" :key="'a' + i">
            <div class="suggestion_info" v-for="(items, index) in item.suggestionData" :key="'b' + index">
              <BoardSimple
                :listData="items"
                :title="suggestionList.length > 1 ? i + 1 : ''"
                :entry="false"
                :showWord="true"></BoardSimple>
            </div>
            <div class="suggestion_annex" v-if="item.suggestionalbumList.length > 0">
              <div class="img_video">
                <ImgUpload :albumList="item.suggestionalbumList" :entry="false" />
              </div>
            </div>
          </div>
        </div>
        <!-- 图片 -->
        <div class="img_annex">
          <div class="list_text_title">
            <span class="text title-text">图片/视频/附件</span>
          </div>
          <ImgUpload v-if="albumList.length > 0" :albumList="albumList" :entry="false" />
          <p class="entry_cont" v-else>无</p>
        </div>
        <!-- 分管领导点评 -->
        <div class="week_reply" v-if="['01-01', '01-02', '01-03'].includes(recordType)">
          <BoardSound v-if="pageData.isSuggest == '1'" :listData="suggestVO"></BoardSound>
          <BoardSound
            v-else-if="suggestVO && suggestVO.entryCont && pageData.isSuggest == '0'"
            :listData="suggestVO"
            :entry="false"></BoardSound>
        </div>
      </div>
    </div>
    <div v-if="activeName == '1'" class="content">
      <QuaterSummary :summaryData="summaryData" :userType="userType" />
    </div>
    <!-- 底部退回按钮 -->
    <div
      class="btn-return"
      v-if="
        ((pageData.isReturn === '1' || pageData.isSuggest === '1') && activeName == '0') || routerQuery.from === 'view'
      ">
      <template v-if="!routerQuery.from">
        <div @click="exitSubmit()" v-if="pageData.isReturn === '1'">
          <span>退回修改</span>
        </div>
        <div @click="addANDback('2')" v-if="pageData.isSuggest === '1'">
          <span>提交</span>
        </div>
      </template>
      <div class="goBackEdit" @click="goback" v-if="routerQuery.from === 'view'">
        <span>返回编辑</span>
      </div>
    </div>
    <van-popup class="popu_suggese" v-model="popupShow" closeable position="bottom">
      <div class="pop_box">
        <van-field
          v-model="confirmSuggestion"
          rows="3"
          autosize
          label=""
          type="textarea"
          placeholder="请输入原因"
          class="pop_field"
          maxlength="128" />
        <div class="pop_btn">
          <div class="btn_li" @click="cancelExtraParmas()">取消</div>
          <div class="btn_li" @click="addANDback('1')">确定退回</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import BoardSound from '@com/BoardSound'
import BoardSimple from '@com/BoardSimple'
import {
  getRecordDetailByPeriod,
  getFormByNoteId,
  getWeekRecordForm,
  getMonthRecordForm,
  saveReturn,
  saveSuggest,
} from '@api/api-documentary.js'
import ImgUpload from '@com/ImgUpload'
import QuaterSummary from './components/QuaterSummary'
import MyVoice from '@com/MyVoice'
export default {
  name: 'weekdetail',
  components: {
    MyNavBar,
    BoardSound,
    BoardSimple,
    QuaterSummary,
    ImgUpload,
    MyVoice,
  },
  props: {},
  data() {
    return {
      activeName: '0',
      showTabs: false,
      summaryData: {},
      showSumTips: true,
      title: '纪实本详情',
      pageData: {},
      recordType: '01-01',
      // 路由传参
      routerQuery: {},
      enclosureList: [],
      albumList: [],
      allData: [
        {
          id: 'workContent',
          title: '本周工作纪实',
          entryCont: '',
          audioList: [],
        },
        {
          id: 'plan',
          title: '下周工作计划',
          entryCont: '',
          audioList: [],
        },
      ],
      videoPlayShow: false,
      videoPlayUrl: '',
      watchData: [],
      suggestVO: {
        id: 'suggestion',
        title: '纪实回复',
        entryCont: '',
        audioList: [],
        wordLimit: 128,
      },

      popupShow: false,
      confirmSuggestion: '',
      suggestionList: [],
      userType: '1-1', // 用户类型 1-1非领导成员公务员 1-2领导成员公务员  1-3曾经担任领导职务人员和享受非领导职务待遇人员"
    }
  },
  computed: {},
  watch: {
    allData: {
      // 数据变化时执行的逻辑代码
      handler(news, old) {
        this.watchData = news
        if (this.routerQuery.anchor == 1) {
          // 问题建议 滚动
          this.$nextTick(() => {
            let container = document.getElementById('content')
            container.scrollTop = document.getElementById('suggestion').offsetTop
          })
        }
      },
      // 开启深度监听
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.routerQuery = Object.assign({}, this.$route.query)
    this.recordType = this.routerQuery.recordType || '01-01'
    switch (this.routerQuery.recordType) {
      case '01-02':
        // 月小结
        this.allData = [
          {
            title: '政治表现及学习情况',
            entryCont: '',
            id: 'politicsCon',
            audioList: [],
            placeholder: '请输入政治表现及学习情况',
          },
          {
            title: '工作亮点及创新情况',
            entryCont: '',
            id: 'innovateCon',
            audioList: [],
            placeholder: '请输入工作亮点及创新情况',
          },
          {
            title: '主要不足及具体事例',
            entryCont: '',
            id: 'lackCon',
            audioList: [],
            placeholder: '请输入主要不足及具体事例',
          },
          {
            title: '奖惩情况',
            entryCont: '',
            id: 'rpCon',
            audioList: [],
            placeholder: '请输入奖惩情况',
          },
        ]
        break
      case '01-03':
        // 季度总结
        this.allData = [
          {
            title: '本季度个人工作汇总',
            entryCont: '',
            audioList: [],
            id: 'workContent',
            required: true,
          },
          {
            title: '教育培训情况',
            entryCont: '',
            id: 'politicalExhibition',
            audioList: [],
            placeholder: '教育培训情况',
          },
          {
            title: '奖惩情况',
            entryCont: '',
            id: 'rewardsAndPunishments',
            audioList: [],
            placeholder: '请输入奖惩情况',
          },
        ]
        break
      case 'DEAL_MAIN_QUARTER_NOTE':
        this.activeName = '1'
        break
      default:
        this.allData = []
    }

    if (this.routerQuery.recordType == '01-03' || this.routerQuery.recordType == 'DEAL_MAIN_QUARTER_NOTE') {
      // 季度
      this.getJDInit()
      this.getFormByNoteId()
    } else if (this.$route.query.recordType == '01-01') {
      this.getZInit()
    } else if (this.$route.query.recordType == '01-02') {
      this.getYInit()
    }
  },
  methods: {
    removeHtmlStyle(html) {
      let rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    goback() {
      this.$router.go(-1)
    },
    getZInit() {
      let that = this
      getWeekRecordForm({
        id: that.routerQuery.id,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }).then(res => {
        if (!res.data) return
        let data = res.data
        that.pageData = data
        that.suggestVO.entryCont = data.suggest || ''
        if (that.pageData.formV1VO) {
          that.pageData.workCon = that.pageData.formV1VO.workCon
          that.pageData.planCon = that.pageData.formV1VO.planCon
          that.albumList = data.formV1VO.recordFileList
          that.dealSuggestData(data.formV1VO)
        }
        if (that.pageData.formV2VO) {
          if (that.pageData.formV2VO.workConList && that.pageData.formV2VO.workConList.length) {
            that.pageData.workConList = that.pageData.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (that.pageData.formV2VO.planConList && that.pageData.formV2VO.planConList.length) {
            that.pageData.planConList = that.pageData.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          if (!that.albumList.length) {
            that.albumList = data.formV2VO.recordFileList
          }
          if (!data.formV1VO && !data.formV1VO.proConList.length) {
            that.dealSuggestData(data.formV2VO)
          }
        }
      })
    },
    getJDInit() {
      let that = this
      getRecordDetailByPeriod({
        id: this.routerQuery.id,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }).then(res => {
        if (!res.data) return
        let data = res.data
        that.suggestVO.entryCont = data.suggest || ''
        that.pageData = res.data
        that.allData[0].entryCont = data.workCon
        that.allData[0].audioList = data.workAudioList
        that.allData[1].entryCont = data.eduCon
        that.allData[1].audioList = data.eduAudioList
        that.allData[2].entryCont = data.rpCon
        that.allData[2].audioList = data.rpAudioList
        that.albumList = data.recordFileList
        // 工作建议
        that.dealSuggestData(data)
      })
    },
    // 退回修改
    addANDback(type) {
      let params = {
        noteId: this.pageData.recordId,
        replayContent: type === '2' ? this.suggestVO.entryCont : this.confirmSuggestion,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
        suggestionList: [],
      }
      if (!params.replayContent) {
        const str = type === '2' ? '请输入回复内容' : '请输入退回原因'
        return this.$toast.fail(str)
      }
      if (type === '1') {
        this.returnBoard(params)
      } else if (type === '2') {
        this.suggBoard(params)
      }
    },
    // 周纪实退回修改按钮
    exitSubmit() {
      this.popupShow = true
    },
    // 取消修改
    cancelExtraParmas() {
      this.confirmSuggestion = ''
      this.popupShow = false
    },
    closeTip() {
      this.showSumTips = false
    },
    getFormByNoteId() {
      getFormByNoteId({
        id: this.$route.query.id,
      }).then(res => {
        let data = res.data
        this.summaryData = {}
        if (data && Object.keys(data).length > 0) {
          this.showTabs = true
          this.summaryData = data
          this.activeName = '1'
          this.userType = '1-' + data.userCategory
          if (this.routerQuery.recordType == 'DEAL_MAIN_QUARTER_NOTE') {
            this.showTabs = false
          }
        }
      })
    },
    dealSuggestData(data) {
      const that = this
      const arr = []
      // 工作建议
      if (data.proConList.length > 0) {
        let list = data.proConList
        list.forEach(item => {
          arr.push({
            suggestionData: [
              {
                id: '问题建议',
                title: '问题建议',
                entryCont: item.proCon,
                audioList: item.proAudioList,
                isAt: true,
                wordLimit: 300,
              },
            ],
            suggestionalbumList: item.proFileList,
            suggestionId: item.id,
          })
        })
      } else {
        arr.push({
          suggestionData: [
            {
              id: '',
              title: '问题建议',
              entryCont: '',
              audioList: [],
              isAt: true,
              wordLimit: 300,
            },
          ],
          suggestionalbumList: [],
          suggestionId: '',
        })
      }
      that.suggestionList = arr
    },
    getYInit() {
      let that = this
      getMonthRecordForm({
        id: that.routerQuery.id,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }).then(res => {
        if (!res.data) return
        let data = res.data
        that.suggestVO.entryCont = data.suggest || ''
        that.pageData = Object.assign(that.pageData, data)
        if (that.pageData.formV1VO) {
          that.allData.forEach(item => {
            item.entryCont = that.pageData.formV1VO[item.id] || ''
            item.audioList = that.pageData.formV1VO[`${item.id.slice(0, -3)}AudioList`] || []
          })
          that.pageData.workCon = that.pageData.formV1VO.workCon
          that.pageData.planCon = that.pageData.formV1VO.planCon
          that.albumList = data.formV1VO.recordFileList
          that.dealSuggestData(data.formV1VO)
        }
        if (that.pageData.formV2VO) {
          if (that.pageData.formV2VO.workConList && that.pageData.formV2VO.workConList.length) {
            that.pageData.workConList = that.pageData.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (that.pageData.formV2VO.planConList && that.pageData.formV2VO.planConList.length) {
            that.pageData.planConList = that.pageData.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          if (!that.albumList.length) {
            that.albumList = data.formV2VO.recordFileList
          }
          if (!data.formV1VO && !data.formV1VO.proConList.length) {
            that.dealSuggestData(data.formV2VO)
          }
        }
      })
    },
    returnBoard(params) {
      saveReturn(params).then(res => {
        if (res.code === 0) {
          this.$toast.success('退回成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
    suggBoard(params) {
      saveSuggest(params).then(res => {
        if (res.code === 0) {
          this.$toast.success('提交成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .tabs_box {
    // position: fixed;
    top: 48px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 10;
    /deep/.van-tabs--line .van-tabs__wrap {
      height: 40px;
      .my_tab {
        font-weight: bold;
      }
    }
  }
  .form_tip_d {
    font-size: 12px;
    .form_tip {
      color: red;
      padding: 0 5px;
      margin-top: 5px;
      display: inline-block;
    }
  }
  // 内容样式
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .entry {
      flex: 1;
      background-color: #f0f0f0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      // 问题建议
      .suggestion_box {
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
        margin-bottom: 16px;
        border-radius: 5px;
        overflow: hidden;
        .suggestion {
          .suggestion_info {
            border-top: 1px solid #f0f0f0;
            /deep/.list_text_title {
              margin-bottom: 0;
              padding-left: 14px;
            }
          }
          .suggestion_annex {
            background-color: #fff;

            .img_video {
              padding: 0 16px;
            }

            // 文件上传
            .up_file {
              padding: 20px 16px 0 16px;
            }
          }
        }
      }
      // 标题
      .list_text_title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
        .text {
          background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        }
      }
      // 用户信息
      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .user_heade {
          width: 53px;
          .heade_box {
            height: 45px;
            width: 45px;
            border-radius: 50%;
            .iconfont {
              font-size: 45px;
              color: #929191;
            }
            img {
              width: 100%;
            }
          }
        }
        .user_info {
          flex: 1;
          .user_name {
            font-size: 13px;
            color: #a57d60;
            font-weight: bold;
            margin-bottom: 8px;
          }
          .user_job {
            font-size: 13px;
            color: #666666;
          }
        }
      }
      // 标题
      .detail_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        .title {
          flex: 1;
          font-size: 19px;
          font-weight: bold;
          color: #333;
          line-height: 24px;
        }
        .time {
          font-size: 13px;
          color: #999999;
        }
      }
      // 图片附件
      .img_annex {
        padding: 20px 16px 16px;
        border-radius: 5px;
        background-color: #ffffff;
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
        .entry_cont {
          font-size: 13px;
        }
      }
      // 文件附件
      .file_annex {
        padding: 20px 16px 8px 16px;
        border-radius: 2px;
        background-color: #ffffff;
        margin-bottom: 10px;
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      }
      // 个人季度自评
      .evaluate {
        padding: 20px 16px;
        background-color: #fff;

        .score_select {
          background-color: #fff;
        }
      }
      .work_box {
        font-size: 14px;
        padding: 16px 14px;
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 5px;
        .work_box_title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin-bottom: 16px;
          span {
            background-image: linear-gradient(#ffffff 50%, #f9f1e8);
          }
        }
        .work_box_text {
          font-size: 13px;
          line-height: 21px;
          color: #333;
          word-break: break-all;
          user-select: text;
          -webkit-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          .one_week {
            margin-bottom: 10px;
            .one_week_bottom {
              span {
                padding-right: 8px;
                margin-right: 8px;
                border-right: 1px solid #7f7f7f;
                &:last-child {
                  border-right: none;
                }
              }
            }
            .top_voice {
              margin-bottom: 5px;
              .top_label {
                position: relative;
                .m-r-10 {
                  position: absolute;
                  left: 0;
                  bottom: 0;
                }
              }
              /deep/.voice_list {
                margin-left: 20px;
              }
            }
          }
          .simple-box {
            .simple_voice {
              margin-bottom: 5px;
              /deep/.voice_list {
                flex: 1;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .work_category {
        margin-bottom: 6px;
        /deep/.list_box {
          margin-bottom: 0 !important;
        }
      }
    }
    .week_reply {
      margin-top: 15px;
    }
  }
  // 适配纪实回退
  .fitBack {
    padding-bottom: 50px;
  }
  // 退回按钮
  .btn-return {
    background: #fff;
    width: 100%;
    z-index: 99;
    position: absolute;
    bottom: 0;
    padding: 6px 16px;
    box-shadow: 0px 0px 19px 1px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      text-align: center;
      color: #ffffff;
      height: 36px;
      line-height: 36px;
      background-color: #0f61d5;
      font-weight: bold;
      border-radius: 4px;
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .popu_suggese {
    position: absolute;
    .pop_box {
      margin-top: 15px;
      padding-bottom: 20px;
      .pop_btn {
        padding: 0 15px;
        height: 36px;
        display: flex;
        justify-content: space-around;
        .btn_li {
          height: 100%;
          width: 35%;
          background-color: #0f61d5;
          font-weight: bold;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
        }
      }
    }
    /deep/.van-field__body {
      padding: 25px 20px 15px;
      .pop_field {
        margin-top: 15px;
      }
      .van-field__control {
        border: 1px solid #999;
        border-radius: 6px;
        padding: 5px 15px;
      }
    }
  }
}
</style>
